<?php
require_once 'common.php';
require_once 'head.php';
?>

<!--script src='jquery.mousewheel.min.js'></script-->

<div id="play_ground_stage"></div>
<div id="play_ground_selector"></div>
<div id="play_ground_drag_layer"></div>

<div id="mini_map"><div id=mini_map_navigator></div></div>

<div id="upload_form">
	<div style="width:100%; text-align:right;"><input type=button onclick="$.unblockUI();" value="X" /></div>
	<div id="file-uploader" style="padding-left:50px;">
		<noscript>
		<p>Please enable JavaScript to use file uploader.</p>
		<!-- or put a simple form for upload here -->
		</noscript>
	</div>
	<div id="file-list" style="padding-top:10px;"></div>
	<input type=submit id="button-confirm-upload" value="O K !" />
</div>

<div style="display:none;" id="image_show_url"></div>


<script>

var cell_size = <?php echo CELL_SIZE; ?>;
var cell_count_of_brick_side = <?php echo CELL_COUNT_OF_BRICK_SIDE; ?>;
var brick_size = cell_size*cell_count_of_brick_side;

//地图初始化位置
var map_x = 250*cell_size;
var map_y = 250*cell_size;

var win_width = $(window).width();
var win_height = $(window).height();

$(function($) {
	//最左上角需要载入的map cell编号
	//Math.floor((map_x-win_width/2)/cell_size), Math.ceil((map_y-win_height/2)/cell_size);
	//最右下角需要载入的map cell编号
	//Math.floor((map_y-win_height/2)/cell_size), Math.ceil((map_y+win_height/2)/cell_size);

	// init map
	draw_map = function(offset_x, offset_y, nocache) {
		if (nocache)
		{
			$('#mini_map').css({
				'background-image':'url(port/playground_minimap.php?' + Math.random() + ')'
			});
			$('#play_ground_stage').html('');
		}
		
		var m_x = map_x-offset_x;
		var m_y = map_y-offset_y;

		var bx_start = Math.floor((m_x-win_width/2)/brick_size);
		var bx_end = Math.ceil((m_x+win_width/2)/brick_size);
		var by_start = Math.floor((m_y-win_height/2)/brick_size);
		var by_end = Math.ceil((m_y+win_height/2)/brick_size);

		for (var x=bx_start; x<=bx_end; x++)
		{
			for (var y=by_start; y<=by_end; y++)
			{
				var brick_id = 'brick_'+x+'_'+y;
				var cell = $("#"+brick_id)[0];
				var imUrl = '';

				if (!cell)
				{
					imUrl = 'port/playground_getbrick.php?bx='+x+'&by='+y;
					cell = $('<div id='+brick_id+' class=cell></div>');
					cell.appendTo($('#play_ground_stage'));
					cell.css({'background-image':'url(' + imUrl + ')'});

				}

				$(cell).css({
					left:x*brick_size-map_x+win_width/2,
					top:y*brick_size-map_y+win_height/2
				});
			}
		}
		
		var cells = $('.cell');

		cells.each(function(index) {
			var dist_limit = 1000;
			
			var cell=$(cells[index]);
			var offset = cell.offset();
			
			var left = offset_x+offset.left;
			var right = left+cell.width();
			var top = offset_y+offset.top;
			var bottom = bottom+cell.height();
			
			$(cell).css({
				left: left,
				top: top
			});


			
			/*if (right < -dist_limit ||
				left > win_width+dist_limit ||
				top < -dist_limit ||
				bottom > win_height+dist_limit)
			{
				cell.remove();
			}*/

		});
	
		$('#mini_map_navigator').css({
			left:(m_x-win_width/2)/cell_size/2,
			top:(m_y-win_height/2)/cell_size/2,
			width:(win_width)/cell_size/2,
			height:(win_height)/cell_size/2
		});
	}

	draw_map(0, 0);

	$('#play_ground_stage').css({
		left:0,
		top:0,
		width:win_width-1,
		height:win_height-1
	});


	$('#mini_map').bind('click', function(event) {
		$('#play_ground_selector').hide();

		var position = $(this).position();
		var x = event.pageX-position.left-5;
		var y = event.pageY-position.top-5;

		// reset map
		$('#play_ground_stage').html('');
		map_x = x*cell_size*2;
		map_y = y*cell_size*2;
		draw_map(0, 0);
	}).bind('mouseenter', function(event) {
		$('#play_ground_selector').hide();
	}).bind('mouseleave', function(event) {
		$('#play_ground_selector').show();
	});

	$('#mini_map').css({
		left:win_width-$('#mini_map').width()-6,
		top:win_height-$('#mini_map').height()-6
	});

	var dragStartX = 0;
	var dragStartY = 0;
	var selectorCellX = 0;
	var selectorCellY = 0;
	$('#play_ground_drag_layer').draggable({
		'start':function(event) {
			dragStartX = event.pageX;
			dragStartY = event.pageY;
		},
		'drag':function(event) {
			$('#play_ground_selector').hide();
			draw_map(event.pageX-dragStartX, event.pageY-dragStartY);
		},
		'stop':function(event) {
			$('#play_ground_selector').show();

			map_x -= event.pageX-dragStartX;
			map_y -= event.pageY-dragStartY;
			draw_map(0, 0);

			// reset drag div
			$('#play_ground_drag_layer').css({
				left:0,
				top:0,
				width:win_width-1,
				height:win_height-1
			});
		}
	}).bind('mousemove', function(event) {
		var win_map_x = map_x-win_width/2;
		var win_map_y = map_y-win_height/2;
		var mouse_map_x = event.pageX+win_map_x;
		var mouse_map_y = event.pageY+win_map_y;
		var cell_map_x = Math.floor(mouse_map_x/cell_size);
		var cell_map_y = Math.floor(mouse_map_y/cell_size);
		var selector_x = cell_map_x*cell_size-win_map_x;
		var selector_y = cell_map_y*cell_size-win_map_y;

		if (cell_map_x < 0 || cell_map_y < 0) {
			$('#play_ground_selector').css({
				left:-200
			});
		} else {
			$('#play_ground_selector').css({
				left:selector_x,
				top:selector_y
			});
		}
	}).bind('click', function(event) {
		var win_map_x = map_x-win_width/2;
		var win_map_y = map_y-win_height/2;
		var mouse_map_x = event.pageX+win_map_x;
		var mouse_map_y = event.pageY+win_map_y;
		selectorCellX = Math.floor(mouse_map_x/cell_size);
		selectorCellY = Math.floor(mouse_map_y/cell_size);

		$.post("port/playground_getitem.php", {
				"x" : selectorCellX,
				"y" : selectorCellY
			}, function(data){
				if (data.item_image)
				{
					$.blockUI({
						message: $('#image_show_url'),
						css: {
							'background-image':'url('+data.item_image+')',
							cursor: 'default',
							width: data.item_image_width + 'px',
							height: data.item_image_height + 'px',
							left: ($(window).width() - data.item_image_width) /2 + 'px',
							top:  ($(window).height() - data.item_image_height) /2 + 'px',
							border: 'none'
						}
					});

					$('.blockUI').bind('click', function(event) {
						$.unblockUI();
						$('.blockUI').unbind('click');
					})

				}
				else
				{
					if (data.result == 0)
					{
						$('#button-confirm-upload').hide();
						$('#file-list').html('');
						$.blockUI({ message: $('#upload_form') });
					}
					else
					{
						$.blockUI({ message: data.message });

						$('.blockUI').bind('click', function(event) {
							$.unblockUI();
							$('.blockUI').unbind('click');
						})
					}
				}
			}, "json");

	});

	var uploader = new qq.FileUploader({
		element:$('#file-uploader')[0],
		params: {},
		allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
		debug: false,
		onSubmit: function(id, fileName){},
		onProgress: function(id, fileName, loaded, total){},
		onComplete: function(id, fileName, responseJSON){
			if (!responseJSON.success) return false;
			$('#file-list').html('');

			$("<input type=hidden name=item_image value='"+responseJSON.upname+"'>").appendTo($('#file-list'));
			var im=$("<span>"
				+"<img class=upload_image height=200 src='<?php echo ITEM_IMAGE_UPLOAD_BASE_URL."/"; ?>"+responseJSON.upname+"' /></span>");
			im.appendTo($('#file-list'));
			$(im).bind('click', function(e){
					$(this).remove();
				});
			$('#button-confirm-upload').show();

			$('.qq-upload-list').hide();
		},
		onCancel: function(id, fileName){},
		messages: {
		},
		showMessage: function(message){ alert(message); }
	});
	/*$('#play_ground_drag_layer').bind('mousewheel', function(event, delta) {
		var old_cell_size = cell_size;
		cell_size += 10*delta;
		if (cell_size < 10) cell_size = 10;
		if (cell_size > 200) cell_size = 200;

		$('.cell').css({width:cell_size, height:cell_size});
		$('.cell_line').css({width:(cell_size)*pg_width, height:cell_size});

		//var position = $('#play_ground_drag_layer').position();
		var p = cell_size/old_cell_size;
		var nx = position.left-(p-1)*event.pageX;
		var ny = position.top-(p-1)*event.pageY;
		$('#play_ground_drag_layer').css({left:nx, top:ny});

		return false;
	});*/

	$('#button-confirm-upload').bind('click', function(event, delta) {
		//alert(selectorCellX+', '+selectorCellY);
		$.post("port/playground_additem.php", {
				"item_image" : $('input[name="item_image"]').val(),
				"item_x" : selectorCellX,
				"item_y" : selectorCellY
			}, function(data){
			//alert(data.item_id);
				$.unblockUI();
				draw_map(0, 0, true);
			}, "json");
	});
});

</script>


</body></html>